<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <input type="checkbox" v-model="allSelected"  @click="getChecked" >Select All  {{allSelected}}
<div v-for="todo in todos">
        <input v-model="ischeckdate" type="checkbox"  :value=todo.id> {{todo.id}} {{todo.text}}
</div>

    <pre>{{ ischeckdate | json }}</pre>

</div>
<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
<script>

    new Vue({
        el: '#app',
        data: {
            message: '菜鸟教程!',
            todos: [
                { id :'aaa',text: 'Learn JavaScript' },
                { id:'bbb',text: 'Learn Vue.js' },
                { id:'ccc',text: 'Build Something Awesome' },
                { id:'ddd',text: 'Build Something Awesome' },
                { id:'eee',text: 'Build Something Awesome' }
            ],
            ischeckdate:['aaa','bbb','ccc','ddd']
        },
        methods:{
            getChecked: function() {

                if(this.todos.length==this.ischeckdate.length)
                {
                    this.ischeckdate=[];
                }else
                {

                    /*      类似的方法[].forEach(function(value, index, array) {   });
                     参数说明
                     value:数组元素值
                     index:当前元素索引值
                     array:被映射的数组
                     以上三个参数皆为自定义参数，和位置有关于变量名无关
                     map是映射的意思*/
                    this.ischeckdate=this.todos.map(function(item,index,arr){
                        console.log(item.id)
                        console.log(index)
                        console.log(arr)
                        console.log(arr[0].id)
                        return item.id
                    })

                }
            }
        },
        computed:{
            allSelected: {
                get: function() {
                    var recordnumber=this.todos.length;
                    var ischecknumber=this.ischeckdate.length;
                    if (recordnumber === ischecknumber) {
                        return true;
                    }
                    return false;
                }
            }
        }

    })
</script>
</body>
</html>
